import React, { Component } from 'react';
import './ProductList.scss'
import { NavBar, Icon } from 'antd-mobile'
import { Tabs, Badge } from 'antd-mobile';
import {Toast} from 'antd-mobile'
import myaxios from '../../utils/myaxios'
import SearchInput from '../../components/searchInput/searchInput'
import emptyPro from '../../assets/images/empty_product.jpg'
class ProductList extends Component {
  constructor(props){
    super(props)
    //列表的引用
    this.goodListRef = React.createRef();
    this.pagesize = 10; // 默认返回的每条请求的数量
    this.pagenum = 1; 
  }
  state = {
    tabs: [
      { title: <Badge >综合</Badge> },
      { title: <Badge >价格</Badge> },
      { title: <Badge >销量</Badge> },
    ],
    goods: [],
  }
  componentDidMount() {
    let { search } = this.props.location
    let params = search.split('?')[1] || "";
    let params_arr = params.split('=')
    if (params_arr[0] === "cid") {
      this.cid = params_arr[1]
    } else if (params_arr[0] === 'query') {
      this.query = params_arr[1]
    }
    this.getProductList()
  
    //注册滚动监听的事件
 
    this.goodListRef.current.parentElement.addEventListener("scroll",this.handleScroll)
  }

  handleScroll = ()=>{
    // console.log("列表开始滚动")
    let parentElement = this.goodListRef.current.parentElement
    // 客户端的高度  clientHeight
    let clientHeight = parentElement.clientHeight
    // console.log("客户端高度",clientHeight)
    // 当前列表可以滚动的高度
    let scrollHeight = parentElement.scrollHeight
    // console.log("列表高度" ,scrollHeight)
    // 当前列表已经滚动的高度
    let scrollTop = parentElement.scrollTop
    // console.log("列表已经滚动的高度",scrollTop)
    if(scrollHeight-clientHeight-scrollTop <= 1){
      this.getProductList()
    }
  }
  componentWillUnmount(){
    //卸载监听事件
    this.goodListRef.current.parentElement.removeEventListener('scroll',this.handleScroll)
  }
  //获取产品的列表
  getProductList = () => {
    // console.log(this)
    // 拼接的参数
    let params = {}
    if (this.cid) {
      params["cid"] = this.cid
    }
    if (this.query) {
      params["query"] =  decodeURIComponent(this.query)
    }
    // // 如果页码存在

    if(this.total){
      params['pagenum'] = ++this.pagenum
      console.log(this.pagenum)
    }else {  
      params['pagenum'] = this.pagenum
      console.log(this.pagenum)
    }
    
    // 默认页码
    params['pagesize'] = this.pagesize
    // 如果当前页码大于总页码
      if(this.pagenum >Math.ceil(this.total / this.pagesize)){
        Toast.info("已经是最后一条数据啦",1)
      }else{
        myaxios.get('goods/search', {
          params: params,
        }).then((res) => {
          this.total = res.total
          this.pagenum = res.pagenum
          this.setState({
            goods:[...this.state.goods,...res.goods] // 追加数据
          })
        }).catch((err) => console.log(err))
      }
    }

  //点击跳转商品详情
  goToProduct = (goods_id) => {
    this.props.history.push('/shopDetail/'+goods_id)
  }
  
  render() {
    return (
      <div className='yg-pl'>
        {/* 顶部nav开始 */}
        <div className='yg-pl-navBar'>
          <NavBar className='center-navBar'
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
          >搜索中心</NavBar>
        </div>
        {/* 顶部nav结束 */}
        {/* 搜索框开始 */}
        <SearchInput></SearchInput>
        {/* 搜索框结束 */}
        <div className='yg-pl-tabs'>
          <Tabs tabs={this.state.tabs}
            initialPage={0}
            tabBarUnderlineStyle={{ borderColor: "var(--themeColor)" }}
            tabBarInactiveTextColor={'#ccc'}
            tabBarActiveTextColor={'#000'}
            onChange={(tab, index) => { console.log('onChange', index, tab); }}
            onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
          >
              <div className='yg-pl-goodsList' ref={this.goodListRef} >
                {
                  this.state.goods && this.state.goods.map((v, i) => {
                    return (
                      <div onClick={this.goToProduct.bind(this,v.goods_id)} key={v.goods_id} className='pl-goodsList-item'>
                        <div className='goodsList-item-left'>
                          <img src={v.goods_small_logo?v.goods_small_logo:emptyPro} alt="" />
                        </div>
                        <div className='goodsList-item-right'>
                          <div className='item-right-item'>{v.goods_name}</div>
                          <div className='item-right-price'>￥{v.goods_price}</div>
                        </div>
                      </div>
                    )
                  })
                }
              </div>
            <div>
              价格
      </div>
            <div>
              销量
        </div>
          </Tabs>
        </div>

      </div>
    );
  }
}

export default ProductList;